<template>
  <el-menu :collapse="collapse" default-active="1" class="el-menu-vertical-demo">
    <el-menu-item index="1">
      <el-icon><el-icon-setting /></el-icon>
      <span>产品基础要素模块</span>
    </el-menu-item>
    <el-sub-menu index="1">
      <template #title>
        <el-icon><el-icon-location /></el-icon>
        <span>产品基础要素模块</span>
      </template>
      <el-menu-item index="1-1">1.产品基础信息</el-menu-item>
      <el-menu-item index="1-2">2.产品净值走势图</el-menu-item>
      <el-menu-item index="1-3">3.产品组合YTM走势图</el-menu-item>
      <el-menu-item index="1-4">4.产品组合久期走势图</el-menu-item>
      <el-menu-item index="1-5">5.产品资产规模走势图</el-menu-item>
      <el-menu-item index="1-6">6.产品杠杆率走势图</el-menu-item>
      <el-menu-item index="1-7">7.产品每日波动</el-menu-item>
      <el-menu-item index="1-8">8.产品收益及回撤情况</el-menu-item>
      <el-menu-item index="1-9">9.债券持仓底层信息表(总表)</el-menu-item>
      <el-menu-item index="1-10">10.债券持仓底层信息表(子表)</el-menu-item>
    </el-sub-menu>
    <el-menu-item index="2">
      <el-icon><el-icon-setting /></el-icon>
      <span>图标选择器</span>
    </el-menu-item>
    <el-menu-item index="3">
      <el-icon><el-icon-setting /></el-icon>
      <span>导航3</span>
    </el-menu-item>
  </el-menu>
</template>

<script setup lang="ts">
defineOptions({
  name: 'NavSide'
})

defineProps<{
  collapse: boolean;
}>()
</script>

<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 200px;
  min-height: 400px;
}
</style>
